<script lang="ts" setup>
import type { TableProps } from 'element-plus'
import { ElTable } from 'element-plus'

const props = defineProps<TableProps<any>>()
const tableRef = ref<InstanceType<typeof ElTable>>()
onMounted(() => {
  // console.log(tableRef.value)
})
const pagenation = reactive({
  currentPage: 1, // 当前页码
  pageSize: 100, // 每页显示的条数
})
function handleSizeChange(val: number) {
  pagenation.pageSize = val
}

function handleCurrentChange(val: number) {
  pagenation.currentPage = val
}
</script>

<template>
  <ElTable
    ref="tableRef"
    v-bind="{ ...$attrs, ...props }"
    :border="true"
    style="width: 100%;"
    header-cell-class-name="header-cell-style"
  >
    <slot />
  </ElTable>
  <div class=" w-full flex justify-end pt-4">
    <el-pagination
      v-model:current-page="pagenation.currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.header-cell-style {
  color: rgb(48, 48, 48);
  font-weight: 600 !important;
  background-color: rgb(250, 251, 255) !important;
}
</style>
